<template>
	<div class="main">
		<div class="bg" :style="{'backgroundImage':'url('+ bg +')'}"></div>
		<!-- <img src="@/assets/images/login/bg.jpg" class="bg"> -->
		<div class="login">
			<div class="ui">
				<h3>欢迎登录总后台</h3>
				<div class="group">
					<el-input
						@keyup.enter.native="login()"
						@input="monitor()"
						v-model="userName"
						placeholder="请输入账号">
						<img src="@/assets/images/login/icon_users.png" slot="prefix" class="icon">
					</el-input>
				</div>
				<div class="group">
					<el-input
						@keyup.enter.native="login()"
						@input="monitor()"
						v-model="password"
						placeholder="请输入密码"
						show-password>
						<img src="@/assets/images/login/icon_lock.png" slot="prefix" class="icon">
					</el-input>
				</div>
				<div class="autoLogin">
					<el-checkbox v-model="checked">下次自动登录</el-checkbox>
				</div>
				<el-button
					:disabled="disabled"
					v-loading="loading"
					type="primary"
					round
					style="width:100%"
					@click="login()">登录</el-button>
			</div>
			<div class="side" :style="{'backgroundImage':'url('+ side +')'}"></div>
		</div>
	</div>
</template>

<script>
import { remote } from '@/api/index'
export default {
	data () {
		return {
			userName:"",
			password:"",
			checked:false,
			loading:false,
			disabled:true,
			side:"http://osscdn.hqjy100.com/huazhang/course/multipart/StsInfo/1576465088211.png",
			bg:"http://osscdn.hqjy100.com/huazhang/course/multipart/StsInfo/1576465075885.jpeg",
			// side:require('@/assets/images/login/side.png'),
			// bg:require('@/assets/images/login/bg.jpg'),
		}
	},
	methods:{
		login:function(){
			if(this.userName && this.password){
				HTTP('login',{
					username:this.userName,
					password:this.password,
					rememberMe:true,
					//validateCode:this.code
				})
				.then(res=>{
					if(res.code == 200){
						this.common.msg('登录成功');
						//记住密码
						if(this.checked){
							localStorage.setItem('username',res.data.userName);
							localStorage.setItem('token',res.data.loginName);
						}
						else{
							sessionStorage.setItem("username",res.data.userName);
							sessionStorage.setItem("token",res.data.loginName);
						}
						this.$router.push('/');
					}
				})
			}
		},
		//获取验证码图片
		getCode:function(){
			let num = Math.ceil(Math.random()*1000);//随机数
			console.log(num);
			this.img = `${remote}/captcha/captchaImage?type=math&test=${num}`;
		},
		//按钮灰色
		monitor:function(){
			if(this.userName && this.password){
				this.disabled = false;
			}
			else{
				this.disabled = true;
			}
		},
	},
	mounted(){
		//this.getCode();
	}
}
</script>

<style lang="scss" scoped>
	/deep/ .el-checkbox{
		color: #999;
	}
	/deep/ .el-input__inner{
		padding-left: 40px;
	}
	.main{
		background-color: #eef1f6;
		height: 100vh;
		position: relative;
		.login{
			z-index: 500;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 900px;
			height: 450px;
			background-color: #fff;
			border-radius: 20px;
			padding: 80px 100px;
			.ui{
				width: 300px;
				h3{
					font-size: 25px;
					margin-bottom: 40px;
				}
				.icon{
					height: 18px;
					margin: 10px 10px 0 6px;
				}
				.group{
					margin: 20px 0;
				}
				.code{
					img{
						height: 40px;
						margin-left: 10px;
						cursor: pointer;
					}
				}
				.autoLogin{
					margin-bottom: 40px;
					color: #666;
				}
			}
			.side{
				width: 463px;
				height: 470px;
				background-size: cover;
				position: absolute;
				top: -10px;
				right:-100px;
			}
		}
	}
	.bg{
		width: 700px;
		height: 470px;
		z-index: 100;
		position: absolute;
		left:50%;
		bottom: 0;
		background-size: cover;
		transform:translate(-50%, 0);
		margin-left: -350px;
	}
</style>
